<template>
	<div>
		<div class="login_view">
			<el-form :model="loginForm" class="login_form">
				<div class="title_view">美伦私人牙科诊所管理系统登录</div>
				<div class="list_item" v-if="loginType==1">
					<input class="list_inp" v-model="loginForm.username" placeholder="请输入账号" />
				</div>
				<div class="list_item" v-if="loginType==1">
					<input class="list_inp" v-model="loginForm.password" type="password" placeholder="请输入密码" @keydown.enter.native="handleLogin"  />
				</div>
				<div class="list_type" v-if="userList.length>1">
				  <el-radio v-for="(item,index) in userList" :key="index" v-model="loginForm.role"
				    :label="item.roleName">{{item.roleName}}</el-radio>
				</div>
				<div class="list_item">
					<VerifySlider 
						color="#F0F0F0"
						activeColor="#0058AB"
						bg="#fff url('http://codegen.caihongy.cn/20230711/6f5040d648bb4e7c9f89709fe20ce0df.png') no-repeat center"
						activeBg="#fff url('http://clfile.zggen.cn/20231026/06cfbdc0cbcf48879606bc68d8454379.png') no-repeat center"
						ref="verifySlider"
						@success="sliderSuccessClick">
						</VerifySlider>
				</div>
				<div class="btn_view">
					<el-button class="login" v-if="loginType==1" type="success" @click="handleLogin">登录</el-button>
					<el-button class="register" type="primary" @click="handleRegister('zhensuoguanliyuan')">注册诊所管理员</el-button>
					<el-button class="register" type="primary" @click="handleRegister('yisheng')">注册医生</el-button>
					<el-button class="register" type="primary" @click="handleRegister('shoufeiyuan')">注册收费员</el-button>
					<el-button class="register" type="primary" @click="handleRegister('yaoshi')">注册药师</el-button>
				</div>
			</el-form>
		</div>
	</div>
</template>
<script setup>
	import {
		ref,
		getCurrentInstance,
		nextTick,
		onMounted,
	} from "vue";
	import VerifySlider from "@/components/VerifySlider/VerifySlider.vue";
	const userList = ref([])
	const menus = ref([])
	const loginForm = ref({
		role: '',
		username: '',
		password: ''
	})
	const tableName = ref('')
	const loginType = ref(1)
	const context = getCurrentInstance()?.appContext.config.globalProperties;
	const verifySlider = ref()
		//滑块验证码
	const sliderType = ref(false)
	const sliderSuccessClick = () => {
		sliderType.value = true
	}
	//注册
    const handleRegister = (tableName) => {
    	context?.$router.push(`/${tableName}Register`)
    	
    }
	const handleLogin = () => {
		if (!loginForm.value.username) {
			context?.$toolUtil.message('请输入用户名', 'error')
			
			return;
		}
		if (!loginForm.value.password) {
			context?.$toolUtil.message('请输入密码', 'error')
			
			return;
		}
		if (userList.value.length > 1) {
			if (!loginForm.value.role) {
				context?.$toolUtil.message('请选择角色', 'error')
				verifySlider.value.reset()
				return;
			}
			for (let i = 0; i < menus.value.length; i++) {
				if (menus.value[i].roleName == loginForm.value.role) {
					tableName.value = menus.value[i].tableName;
				}
			}
		} else {
			tableName.value = userList.value[0].tableName;
			loginForm.value.role = userList.value[0].roleName;
		}
		if (!sliderType.value) {
			context?.$toolUtil.message('请滑动验证', 'error')
			return false
		}
		login()
	}
	const login = () => {
		context?.$http({
			url: `${tableName.value}/login?username=${loginForm.value.username}&password=${loginForm.value.password}`,
			method: 'post'
		}).then(res => {
			context?.$toolUtil.storageSet("Token", res.data.token);
			context?.$toolUtil.storageSet("role", loginForm.value.role);
			context?.$toolUtil.storageSet("sessionTable", tableName.value);
			context?.$toolUtil.storageSet("adminName", loginForm.value.username);
			context?.$router.push('/')
		}, err => {
		})
	}
	//获取菜单
	const getMenu=()=> {
      let params = {
        page: 1,
        limit: 1,
        sort: 'id',
      }

      context?.$http({
        url: "menu/list",
        method: "get",
        params: params
      }).then(res => {
          menus.value = JSON.parse(res.data.data.list[0].menujson)
          for (let i = 0; i < menus.value.length; i++) {
            if (menus.value[i].hasBackLogin=='是') {
              userList.value.push(menus.value[i])
            }
          }
			loginForm.value.role = userList.value[0].roleName
          context?.$toolUtil.storageSet("menus", JSON.stringify(menus.value));
      })
    }
	//初始化
	const init = () => {
		getMenu();
	}
	onMounted(()=>{
		init()
		
	})
</script>

<style lang="scss" scoped>
	.login_view {
		background-repeat: no-repeat;
		flex-direction: column;
		background-size: cover;
		background: url(/src/assets/img/login_bg.jpg);
		display: flex;
		min-height: 100vh;
		justify-content: center;
		align-items: center;
		position: relative;
    	background-size: cover;
		background-position: center center;
		// 表单盒子
		.login_form {
			border-radius: 50px;
			box-shadow: 0 4px 6px rgba(0,0,0,.5);
			padding: 30px 100px;
			background: #fff;
			display: flex;
			width: 688px;
			justify-content: center;
			flex-wrap: wrap;
		}
		.title_view {
			padding: 30px 0;
			color: #000;
			font-weight: bold;
			width: 100%;
			font-size: 22px;
			text-align: center;
		}
		// item盒子
		.list_item {
			margin: 10px 0;
			display: flex;
			width: 100%;
			justify-content: center;
			align-items: center;
			// 输入框
			.list_inp {
				border: 0px solid #ddd;
				box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
				padding: 0 10px;
				width: 100%;
				line-height: 45px;
				height: 45px;
			}
		}
		// 用户类型样式
		.list_type {
			padding: 10px 0;
			display: flex;
			width: 100%;
			justify-content: center;
			align-items: center;
			// 未选中样式
			:deep(.el-radio) {
				margin: 0;
				display: flex;
				width: 30%;
				justify-content: center;
				align-items: center;
				// 单选框
				.el-radio__inner {
					border: 1px solid #999;
					background: #fff;
				}
				// 提示文字
				.el-radio__label{
					color: #999;
				}
			}
			// 选中样式
			:deep(.is-checked) {
				// 单选框
				.el-radio__inner {
					background-color: #000;
					border-color: #000;
				}
				// 提示文字
				.el-radio__label{
					color: #000;
				}
			}
		}
		// 按钮盒子
		.btn_view {
			padding: 20px 0 0;
			flex-direction: column;
			display: flex;
			width: 100%;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			// 登录
			.login {
				border: 0;
				cursor: pointer;
				border-radius: 0;
				padding: 0 24px;
				margin: 0 10px 10px;
				outline: none;
				color: #fff;
				background: rgba(24,140,145,1);
				font-weight: bold;
				width: 200px;
				font-size: 20px;
				height: 60px;
			}
			// 注册
			.register {
				border: 0;
				cursor: pointer;
				border-radius: 0;
				padding: 0 24px;
				margin: 0 10px 10px;
				outline: none;
				color: #333;
				background: rgba(24,140,145,0.3);
				font-weight: bold;
				width: 200px;
				font-size: 16px;
				height: 50px;
			}
		}
	}

</style>